<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>学生追踪</title>

		<script src="../jss/global.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<!-- 条件区 -->
		<div class="layui-form-item" style="margin-top: 10px; margin-left: 10px">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">学生姓名:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="trackStuName" autocomplete="off" class="layui-input" placeholder="请输入姓名">
				</div>
				<label class="layui-form-mid">跟踪时间:</label>
				<div class="layui-input-inline" style="width: 200px;">
					<input id="beginTime" type="text" autocomplete="off" class="layui-input" placeholder="请选择开始日期">
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<input id="endTime" type="text" autocomplete="off" class="layui-input" placeholder="请选择结束日期">
				</div>
				<label class="layui-form-mid">跟踪者：</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select id="trackTeacherName" name="trackTeacherName">
						<option value="">--请选择--</option>
					</select>
				</div>

				<label class="layui-form-mid">回访情况：</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select id="trackBack" name="">
						<option value="">--请选择--</option>
						<option value="已回访">已回访</option>
						<option value="未回访">未回访</option>
					</select>
				</div>

			</form>
			<button class="layui-btn" id="mySearch" data-type="mySearchTableReload">开始查找</button>
			<button class="layui-btn" onclick="renovates()">刷新</button>
		</div>
		<script type="text/javascript">
			function renovates() {
				window.location.reload(true);
			}
		</script>

		<!-- 顶部工具栏 -->
		<script type="text/html" id="topToolbar">
			<a class="layui-btn layui-btn layui-btn-sm" lay-event="insertBtnEve">
				<i class="layui-icon">&#xe608;</i> 添加
			</a>
		</script>
		<!--行内工具栏-->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="updateBtnEve">修改</a>
			<a class="layui-btn layui-btn-xs" lay-event="detailBtnEve">详情</a>
			<!--<a class="layui-btn layui-btn-xs" lay-event="deleteBtnEve">删除</a>-->
		</script>
		<!--表格-->
		<table class="layui-hide" id="myTable" lay-filter="myTableFil"></table>

		<!-- 增、改、单查共用页面，都不要id，否则和条件区重复了，直接调用serialize即可获取表单数据 -->
		<div id="myHtml" style="display: none; margin-top: 20px;">
			<form class="layui-form" id="myForm" lay-filter="myFormFil" onsubmit="return false;">
				<!-- 隐藏id -->
				<input type="hidden" id="trackId" name="trackId" value="0">
				<div class="layui-form-item">
					<label class="layui-form-label">学生姓名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="trackStuName" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">跟踪时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input id="hiredateSave" type="text" name="trackTime" class="layui-input">
					</div>
				</div>
					<div class="layui-form-item">
					<label class="layui-form-label">回访情况:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="radio" name="trackBack" value="0" title="已回访" checked>
						<input type="radio" name="trackBack" value="1" title="未回访">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">跟踪方式:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="trackWay" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">备注内容:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="trackContent" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">下次跟踪时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="endTime" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">跟踪人:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="trackTeacherName" class="layui-input">
					</div>
				</div>

				<!--<div class="layui-form-item">
					<label class="layui-form-label">跟踪人:</label>
					<div class="layui-input-inline" style="width: 150px;">
						<select id="trackStuNameSave" name="trackId">
							<option value="">请选择</option>
						</select>
					</div>
				</div>-->
			
				<div class="layui-btn-container" style="text-align: center;" id="mySubmitDiv">
					<button class="layui-btn" lay-filter="mySubmitFil" lay-submit="">提交</button>
				</div>
			</form>
		</div>

		<script>
			/* 所有js代码都写这一行里面 */
			layui.use(['table', 'form', 'laydate'], function() {
				var table = layui.table;
				var form = layui.form;
				var laydate = layui.laydate;
				var $ = layui.$;
				//绑定日期插件
				laydate.render({
					elem: '#beginTime', //开始日期
					type: 'datetime'
				});
				laydate.render({
					elem: '#endTime', //结束日期
					type: 'datetime'
				});
				laydate.render({
					elem: '#hiredateSave', //save日期
					type: 'datetime'
				});
				//渲染表格数据
				table.render({
					elem: '#myTable',
					url: globalData.server + 'track/selectAllPageTracks', //数据接口
					where: {
						token: globalData.getToken
					},
					//toolbar : '#topToolbar',
					method: 'post',
					title: '跟踪表',
					page: true, //开启分页
					request: {
						pageName: 'current', //页码的参数名称，默认：page
						limitName: 'size' //每页数据量的参数名，默认：limit
					},
					cols: [
						[ {
							field: 'trackStuName',
							title: '学生姓名',
							width: '10%',
							align: 'center'
						},{
							field: 'trackTime',
							title: '跟踪时间',
							width: '10%',
							align: 'center'
						}, {
							field: 'trackBack',
							title: '回访情况',
							width: '10%',
							align: 'center'
						}, {
							field: 'trackWay',
							title: '跟踪方式',
							width: '10%',
							align: 'center',
						}, {
							field: 'trackContent',
							title: '备注内容',
							width: '10%',
							align: 'center',
						}, {
							field: 'trackAgainTime',
							title: '下次跟踪时间',
							width: '10%',
							align: 'center'
						}, {
							fixed: 'trackTeacherName',
							title: '跟踪人',
							width: '10%',
							align: 'center',
						}, {
							fixed: '',
							title: '操作',
							width: '25%',
							align: 'center',
							toolbar: '#barDemo'
						}]
					],
					id: "myTableReloadId"
				});
				/* 以layui格式创建函数，暂时只有一个函数：mySearchTableReload */
				active = {
					mySearchTableReload: function() {
						table.reload('myTableReloadId', {
							where: {
								'trackStuName': $('#trackStuName').val(),
								'beginTime': $('#beginTime').val(),
								'endTime': $('#endTime').val(),
								'trackTeacherName': $('#trackTeacherName').val(),
								'trackBack': $('#trackBack').val()
							}
						});
					}
				};
				//监听搜索按钮，执行mySearchTableReload方法
				$('#mySearch').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
				$.post(globalData.server + "track/selectAll", {
						token: globalData.getToken
					},
					function(res) {
						var shtml = "<option></option>";
						$.each(res, function(index, value) {
							shtml += '<option value="' + value.trackId + '" > ' + value.trackStuName + '</option>';
						});
						$('#trackBack').html(shtml);
						$('#trackStuNameSave').html(shtml);
						form.render('select'); //刷新select选择框渲染
					}, "json");
					
					//监听顶部工具栏事件，添加/修改按钮，点击弹出页面
			table.on('toolbar(myTableFil)', function(obj) {
				switch (obj.event) {
				case 'insertBtnEve': {
					$('#mySubmitDiv').css("display", "block");

					//如果先点击了修改按钮，表单里有值了，这里重置一下
					$('#myForm')[0].reset();
					$('#myformselect').val("");
					//重置不了id，这里手动重置一下
					$('#trackId').val(0);
					layer.open({
						type : 1,
						title : '添加页面',
						content : $("#myHtml"),
						area : [ '500px', '500px' ]
					});
				}
					break;
				}

			});
			
			table.on('tool(myTableFil)', function(obj) {
				var data = obj.data;
				if (obj.event === 'updateBtnEve') {
					//异步请求到所有部门，res就是返回的全部部门集合
					$.post("../selectAll", function(res) {
						var shtml = "<option></option>";
						$.each(res, function(index, value) {
							//如果选中的这行的部门 和 所有的部门中的某个部门一致
							if (data.trackId == value.trackId) {
								shtml += '<option value="' + value.trackId + '" selected > ' + value.trackStuName + '</option>';
							} else {
								shtml += '<option value="' + value.trackId + '" > ' + value.trackStuName + '</option>';
							}
						});
						$('#trackStuNameSave').html(shtml);
						form.render('select'); //刷新select选择框渲染
					}, "json");
					$('#mySubmitDiv').css("display", "block");
					form.val("myFormFil", data);
					edit_index = layer.open({
						type : 1,
						title : '您正在修改' + data.trackStuName + '的信息',
						content : $("#myHtml"),
						scrollbar : true, /* 滚动条 */
						resize : true, /* 是否允许拉伸 */
						area : [ '600px', '500px' ]
					});
				} else if (obj.event === 'detailBtnEve') {
					//隐藏提交按钮
					$('#mySubmitDiv').css("display", "none");
					form.val("myFormFil", data);
					edit_index = layer.open({
						type : 1,
						title : '您正在查看' + data.trackStuName + '的信息',
						content : $("#myHtml"),
						scrollbar : true, /* 滚动条 */
						resize : true, /* 是否允许拉伸 */
						area : [ '600px', '400px' ]
					});
				} else if (obj.event === 'deleteBtnEve') {
					layer.confirm('确认删除id为[' + data.trackId + ']的信息吗?', function(index) {
						$.post("../delete", {
							"trackId" : data.trackId,
						}, function(res) {
							if (res.code == 0) {
								layer.msg(res.msg, {
									icon : 1,
									time : 1000
								}, function() {
									layer.close(layer.index);
									window.location.reload();
								});
							} else {
								layer.msg(res.msg, {
									icon : 2,
									time : 1000
								});
							}
						}, "json");
					});
				}
			});
			
			//监听新增/修改页面的提交按钮
			form.on('submit(mySubmitFil)', function(data) {
				$('#mySubmitDiv').css("display", "block");
				console.log(data.field);
				//判断是添加还是修改
				var myUrl;
				if ($('#trackStuName').val() != null) {
					if ($('#trackId').val() == "0") {//为0说明没赋值，说明是添加
						myUrl = "../insert";
					} else {
						myUrl = "../update";
					}
				}
				$.post(myUrl, data.field, function(res) {
					if (res.code == 0) {
						//根据后台提示信息弹出msg
						layer.msg(res.msg, {
							icon : 1,
							time : 1000
						}, function() {
							layer.close(layer.index);
							window.location.reload();
						});
					} else {
						layer.msg(res.msg, {
							icon : 5,
							time : 1000
						});
					}
				}, "json");

			});

			});
		</script>

	</body>

</html>